<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/header.css" />
	</head>

	<body>

		<header class="mui-bar mui-bar-nav title">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"></a>
			<h1 class="mui-title title-color">用户列表 </h1>
		</header>
		
		<div class="mui-content">
		
			<ul class="mui-table-view" id="ul_user_list" style="margin-bottom: 10px;">
				<!-- <li class="btnOper mui-table-view-cell mui-media">
					<a id="materia_content" href="javascript:;">
						<img class="mui-media-object mui-pull-left" src="../../images/1.jpg">
						<span id="span_nickname" class="mui-pull-right">
							<button type="button" class="passRequest mui-btn mui-btn-red"
								style="padding: 4px 10px;">删除</button>
							<button id="link_edit_user" type="button" class="passRequest mui-btn mui-btn-green"
								style="padding: 4px 10px;">编辑</button>
						</span>
						<div class="mui-media-body">
							<label>用户昵称:汤倩</label> 
							<p class="mui-ellipsis">用户角色:学生; 班级id:10000</p>
						</div>
					</a>
				</li> -->
			</ul>
		
		</div>
		
		<script src="../../js/mui.js"></script>
		<script src="../../js/app.js"></script>
		<script type="text/javascript">
			mui.init()
			
			mui.plusReady(function () {
			    
				// 加载好友请求记录
				var thisWebview = plus.webview.currentWebview();
				thisWebview.addEventListener("show", function(){
					loadingUserInfo();
				});
				
				// 添加自定义事件，刷新
				window.addEventListener("refresh", function(){
					loadingUserInfo();
				});
			})
			
			// 加载用户信息
			function loadingUserInfo(){
				
				mui.ajax(app.serverUrl + "/user/admin/query_userinfo", {
					data: {},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						'Content-Type': 'application/json'
					},
					success: function(data) {
						if (data.status == 200) {
							var userInfoList = data.data;
							
							var ul_user_list = document.getElementById("ul_user_list");
							
							if (userInfoList != null && userInfoList.length > 0) {
								var user_list_html = "";
								for (var i = 0; i < userInfoList.length; i++) {
									user_list_html += userInfoHtml(userInfoList[i]);
								}
								ul_user_list.innerHTML = user_list_html;
							} else {
								ul_user_list.innerHTML = "";
							}
						} else {
							app.showToast("获取数据失败，请重试！", "error");
						}
						
						//动态对删除按钮进行事件绑定
						mui(".btnOper").on("tap", ".deleteUserInfo", function(e) {
							var userId = this.getAttribute("userId");
							mui.ajax(app.serverUrl + "/user/admin/delete_userinfo?user_id=" + userId, {
								data: {},
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								timeout: 10000, //超时时间设置为10秒；
								headers: {
									'Content-Type': 'application/json'
								},
								success: function(data) {
									if (data.status == 200) {
										app.showToast("成功删除用户！", "success");
										loadingUserInfo();
									} else {
										app.showToast("获取数据失败，请重试！", "error");
									}
								}
							});
						});
						
						//动态对编辑按钮进行事件绑定
						mui(".btnOper").on("tap", ".editUserInfo", function(e) {
							
							var classId = this.getAttribute("classId");
							var userName = this.getAttribute("userName");
							var userId = this.getAttribute("userId");
							
							mui.openWindow({
								url: "editUserInfo.html", 
								id: "editUserInfo.html",
								createNew: true,
								extras: {    // 传给下一个页面的值
									classId: classId,
									userName: userName,
									userId: userId
								}
							});
						});
						
						
					}
				});
				
			}
			
			// 用户信息列表HTML
			function userInfoHtml(userInfo){
				var html = "";
				if (userInfo.role_type == 3) {
					html = '<li class="btnOper mui-table-view-cell mui-media">' +
						'<a id="materia_content" href="javascript:;">' +
							'<img class="mui-media-object mui-pull-left" src="' + app.imgServerUrl + userInfo.head_portrait_url_small + '">' +
							'<span id="span_nickname" class="mui-pull-right">' +
								'<button userId="' + userInfo.user_id + '" type="button" class="deleteUserInfo mui-btn mui-btn-red"' +
									'style="padding: 4px 10px;">删除</button>' +
								'<button classId="' + userInfo.class_id + '" userName="' + userInfo.name + '" userId="' + userInfo.user_id + '" type="button" class="editUserInfo mui-btn mui-btn-green"' +
									'style="padding: 4px 10px;margin-left: 4px;">编辑</button>' +
							'</span>' +
							'<div class="mui-media-body">' +
								'<label>用户昵称:' + userInfo.name + '</label> ' +
								'<p class="mui-ellipsis">用户角色:学生; 班级id:' + userInfo.class_id + '</p>' +
							'</div>' +
						'</a>' +
					'</li>';
				} else if (userInfo.role_type == 2) {
					html = '<li class="btnOper mui-table-view-cell mui-media">' +
						'<a id="materia_content" href="javascript:;">' +
							'<img class="mui-media-object mui-pull-left" src="' + app.imgServerUrl + userInfo.head_portrait_url_small + '">' +
							'<span id="span_nickname" class="mui-pull-right">' +
								'<button userId="' + userInfo.user_id + '" type="button" class="deleteUserInfo mui-btn mui-btn-red"' +
									'style="padding: 4px 10px;">删除</button>' +
								'<button classId="' + userInfo.class_id + '" userName="' + userInfo.name + '" userId="' + userInfo.user_id + '" type="button" class="editUserInfo mui-btn mui-btn-green"' +
									'style="padding: 4px 10px;margin-left: 4px;">编辑</button>' +
							'</span>' +
							'<div class="mui-media-body">' +
								'<label>用户昵称:' + userInfo.name + '</label> ' +
								'<p class="mui-ellipsis">用户角色:老师; 班级id:' + userInfo.class_id + '</p>' +
							'</div>' +
						'</a>' +
					'</li>';
				} else {
					html = '<li class="btnOper mui-table-view-cell mui-media">' +
						'<a id="materia_content" href="javascript:;">' +
							'<img class="mui-media-object mui-pull-left" src="' + app.imgServerUrl + userInfo.head_portrait_url_small + '">' +
							'<span id="span_nickname" class="mui-pull-right">' +
								'<button classId="' + userInfo.class_id + '" userName="' + userInfo.name + '" userId="' + userInfo.user_id + '" type="button" class="editUserInfo mui-btn mui-btn-green"' +
									'style="padding: 4px 10px;">编辑</button>' +
							'</span>' +
							'<div class="mui-media-body">' +
								'<label>用户昵称:' + userInfo.name + '</label> ' +
								'<p class="mui-ellipsis">用户角色:管理员</p>' +
							'</div>' +
						'</a>' +
					'</li>';
				}
				
				return html;
			}
		</script>
	</body>

</html>
